<template>
  <a-modal :title="formTile + '分组'" :visible="true" width="60%" :footer="null" @cancel="reset">
    <a-card>
      <a-row type="flex" justify="start" align="top">
        <a-col :span="24">
          <a-form :form="form" @submit="handleSubmit" :labelCol="formItemLayout.labelCol" :wrapperCol="formItemLayout.wrapperCol">
            <a-form-item label="组名" :required="true">
              <a-input
                placeholder="请输入组名"
                :maxLength="15"
                allow-clear
                v-decorator="[
                  `name`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入分类名称'
                      }
                    ]
                  }
                ]"
              />
            </a-form-item>
            <a-row>
              <a-col :span="16" :offset="8" class="info-action">
                <a-button type="primary" @click="reset">返回</a-button>
                <a-button type="primary" class="ml-20" html-type="submit" :loading="loading">保存</a-button>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
  </a-modal>
</template>

<script>
import { createGroup, updateGroup } from '@api/pattern/index.js'
import { isTrue } from '../util/utils.js'
export default {
  props: {
    group: {
      type: Object,
      default: null
    }
  },

  data() {
    return {
      loading: false,
      formItemLayout: {
        labelCol: {
          xl: { span: 5 },
          xs: { span: 5 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xl: { span: 8 },
          xs: { span: 12 },
          sm: { span: 12 }
        }
      },
      formTile: '新增'
    }
  },

  computed:{
    jobNumber(){
      return this.$store.getters.userInfo.workNo || ''
    }
  },

  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'group'})
  },

  created() {
    const { group } = this.$props
    if (isTrue(group)) {
      this.formTile = '编辑'
      this.$nextTick(() => {
        this.form.setFieldsValue({ name: group.name})
      })
    }
    console.log(createCategory);
  },

  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        console.log(err, values)
        if (!err) {
          this.submit(values)
        }
      })
    },
    async submit(values) {
      try {
        this.loading = true
        const { group,jobNumber } = this
        const isEdit = isTrue(group)
        values.jobNumber = jobNumber
        if (isEdit) {
          values.id = group.id
        }
        const res =  isEdit ? await updateGroup(values) : await createGroup(values)
        if (res.code == 200) {
          let text = isEdit ? '编辑成功' : '新增成功'
          this.$message.success(text)
          this.reset()
        } else {
          this.$message.error(res.msg || res.message)
        }
      } catch (error) {
        this.loading = false
        console.log(error)
      }
    },
    reset() {
      this.form.resetFields()
      this.loading = false
      this.$emit('close')
    }
  }
};
</script>
<style scoped lang="less">
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
.ml-20 {
  margin-left: 20px;
}

</style>
